let that
class DynamicTable {
	constructor(
		className,
		thead,
		tbody,
		theadData,
		tbodyData,
		reverseBtn,
		delAllSeclected
	) {
		that = this
		this.table = document.querySelector(className)
		this.thead = document.querySelector(thead)
		this.tbody = document.querySelector(tbody)
		this.theadData = theadData
		this.tbodyData = tbodyData
		this.reverseBtn = document.querySelector(reverseBtn)
		this.delAllSeclectedBtn = document.querySelector(delAllSeclected)
		this.init()
	}
	init() {
		// 创建之前先清空
		this.tbody.innerHTML = ''
		this.thead.innerHTML = ''

		this.creatElement(this.thead, this.tbody, this.theadData, this.tbodyData)
		this.cheackbtn = document.querySelector('.cheackbtn')
		this.trs = document.querySelectorAll('#tbody tr')
		this.cheackInputs = document.querySelectorAll('.tbody input[type=checkbox]')

		this.cheackbtn.addEventListener('change', that.change)
		this.cheackInputs.forEach((item) => {
			item.addEventListener('change', that.changeItem)
		})
		this.reverseBtn.addEventListener('click', that.reverseCheack)
		this.delAllSeclectedBtn.addEventListener('click', that.delAll)
	}
	creatElement(thead, tbody, theadData, tbodyData) {
		// 创建 最前面的checkbox
		const th = document.createElement('th')
		const cheackInput = document.createElement('input')
		cheackInput.type = 'checkbox'
		cheackInput.className += 'cheackbtn'

		cheackInput.innerHTML = '操作'
		th.appendChild(cheackInput)
		thead.appendChild(th)
		// thead
		for (let i = 0; i < theadData.length; i++) {
			const element = document.createElement('th')
			element.innerHTML = theadData[i]
			thead.appendChild(element)
		}

		//  最后一栏
		const options = document.createElement('th')
		options.innerHTML = '操作'
		thead.appendChild(options)

		// tbody
		for (let i = 0; i < tbodyData.length; i++) {
			const tr = document.createElement('tr')
			// 创建 最前面的checkbox
			const td1 = document.createElement('td')
			const input = document.createElement('input')
			input.type = 'checkbox'

			td1.appendChild(input)
			tr.appendChild(td1)
			tbody.appendChild(tr)

			for (let item in tbodyData[i]) {
				const td = document.createElement('td')
				td.innerHTML = tbodyData[i][item]
				tr.appendChild(td)
			}
			// 添加按钮
			const td = document.createElement('td')
			const button = document.createElement('button')
			button.innerHTML = '删除'
			button.addEventListener('click', that.del)
			td.appendChild(button)
			tr.appendChild(td)
			tbody.appendChild(tr)
		}
	}
	// 删除逻辑
	del(e) {
		const tr = e.target.parentNode.parentNode
		const res = confirm('确定要删除')
		if (res) {
			tr.parentNode.removeChild(tr)
			// 修改数据
		}
	}
	// 反选逻辑
	reverseCheack() {
		that.cheackInputs.forEach((item) => {
			item.checked = !item.checked
		})
		that.isCheackedAll()
	}
	// 单选框改变
	change(e) {
		console.log(that.cheackInputs)
		that.cheackInputs.forEach((item) => {
			item.checked = e.target.checked
		})
	}
	// 检查body中多现框是否改变状态
	changeItem() {
		that.isCheackedAll()
	}
	// 是否全选
	isCheackedAll() {
		that.cheackbtn.checked = Array.from(that.cheackInputs).every(
			(item) => item.checked
		)
	}
	// 删除全部
	delAll() {
		let input = document.querySelectorAll('tbody tr td input')
		input.forEach((item) => {
			console.log(item)
			if (item.checked) {
				const tr = item.parentNode.parentNode
				tr.parentNode.removeChild(tr)
			}
		})
		input = document.querySelectorAll('tbody tr td input')
		if (!input.length) {
			that.table.innerHTML = '购物车暂无数据'
			that.reverseBtn.style.display = 'none'
			that.delAllSeclectedBtn.style.display = 'none'
		}
	}
}
